<template>
<div>
  
  <button @click="comp = 'News'">新闻</button>
  <button @click="comp = 'Music'">音乐</button>
   <button @click="comp = 'Game'">游戏</button>

    <keep-alive>
     <component :is="comp"></component>
   </keep-alive> 

</div>
</template>


<script>
/*
  只有动态组件使用异步组件才有意义
  异步组件:
    - 在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块
    - Vue 允许你以一个函数的方式注册你的组件
    - Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
    - 使用import方法进行按需引入组件,并且在webpack打包的时候预解析我们代码的时候,就会把import引入的模块进行单独打包,当import被调用的时候才会加载当前单独打包的文件
*/


export default {
  name:"App",
  components:{
    News:() => {
      //import按需加载模块是异步的,所以渲染当前按需加载的模块需要等待当前模块加载完成
      //我们需要把import的返回值promise实例返回出去,当检测到当前的promise实例成功后,则说明模块加载完毕,就会渲染当前的模块

      return import("./componeents/News.vue")
    },
    Music:()=>{
      return import("./componeents/Music.vue")
    }
    ,
    Game:()=>{
      return import("./componeents/Game.vue")
    },
  },
  data() {
    return {
      comp:"",
    }
  },

}
</script>

<style>

</style>